<script setup lang="ts">
import { computed, ref, watch } from 'vue';
  interface Fruit {
    id:number
    icon:string
    isChecked:boolean
    num:number
    price:number
  }

  // 水果列表
  const  defaultList = ref<Fruit[]>([
  {
    id: 1,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/ll.png',
    isChecked: true,
    num: 2,
    price: 6,
  },
  {
    id: 2,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/smt.png',
    isChecked: false,
    num: 7,
    price: 20,
  },
  {
    id: 3,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/tg.png',
    isChecked: false,
    num: 3,
    price: 40,
  },
  {
    id: 4,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/xg.png',
    isChecked: false,
    num: 10,
    price: 3,
  },
  {
    id: 5,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/yl.png',
    isChecked: false,
    num: 20,
    price: 34,
  },
  ],) 
  
  // 持久化存储
  const fruitList = localStorage.getItem('list') === null
   ?
    ref<Fruit[]>(defaultList.value) 
    : 
    ref<Fruit[]>(JSON.parse(localStorage.getItem('list') || '[]'))
    
  watch(fruitList,()=>{
    localStorage.setItem('list',JSON.stringify(fruitList.value))
  },{deep:true})
  
  // 点击累加
  const addCount =(id:number)=>{
  //  let num = fruitList.value.find(item=>item.id === id)
  //  num!.num++
  let res = fruitList.value.filter(item=>item.id === id)
  res[0].num++
  }
  // 点击递减
  const sub = (id:number)=>{
    // let data = fruitList.value.find(item=>item.id === id)
    let data = fruitList.value.filter(item=>item.id === id)
    
    if(data[0].num>1){
       data[0].num--
    }else{
      alert('至少要有一件商品')
    }
  }
  // 删除商品
  const del = (id:number)=>{
    fruitList.value = fruitList.value.filter(item=>item.id !== id)
  }

  // 是否全选
  const allSelect = computed({
    get(){
      return fruitList.value.every(item=>item.isChecked)
    },
    set(value){
      fruitList.value.forEach(item=>item.isChecked = value)
    }
  })
  // 总价
  const totalPrice = computed(()=>{
    let res = fruitList.value.filter(item=>item.isChecked)
    return res.reduce((sum,item)=>sum+=item.num*item.price,0 )
  })
  

</script>

<template>
  <div class="app-container" id="app">
    <!-- 顶部banner -->
    <div class="banner-box"><img src="https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/sg_top.png" alt="" /></div>
    <!-- 面包屑 -->
    <div class="breadcrumb">
      <span>🏠</span>
      /
      <span>购物车</span>
    </div>
    <!-- 购物车主体 -->
    <div class="main" v-if="fruitList.length">
      <div class="table">
        <!-- 头部 -->
        <div class="thead">
          <div class="tr">
            <div class="th">选中</div>
            <div class="th th-pic">图片</div>
            <div class="th">单价</div>
            <div class="th num-th">个数</div>
            <div class="th">小计</div>
            <div class="th">操作</div>
          </div>
        </div>
        <!-- 身体 -->
        <div class="tbody">
          <div class="tr active" v-for="item in fruitList" :key="item.id">
            <div class="td"><input type="checkbox" v-model="item.isChecked" /></div>
            <div class="td"><img :src="item.icon" alt="" /></div>
            <div class="td">{{ item.price }}</div>
            <div class="td">
              <div class="my-input-number">
                <button class="decrease" @click="sub(item.id)"> - </button>
                <span class="my-input__inner">{{ item.num }}</span>
                <button class="increase" @click="addCount(item.id)"> + </button>
              </div>
            </div>
            <div class="td">{{item.num * item.price}}</div>
            <div class="td"><button @click="del(item.id)">删除</button></div>
          </div>

          <!-- <div class="tr">
            <div class="td"><input type="checkbox" /></div>
            <div class="td"><img src="https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/smt.png" alt="" /></div>
            <div class="td">7</div>
            <div class="td">
              <div class="my-input-number">
                <button disabled class="decrease"> - </button>
                <span class="my-input__inner">1</span>
                <button class="increase"> + </button>
              </div>
            </div>
            <div class="td">14</div>
            <div class="td"><button>删除</button></div>
          </div> -->
        </div>
      </div>
      <!-- 底部 -->
      <div class="bottom">
        <!-- 全选 -->
        <label class="check-all">
          <input type="checkbox" v-model="allSelect"/>
          全选
        </label>
        <div class="right-box">
          <!-- 所有商品总价 -->
          <span class="price-box">总价&nbsp;&nbsp;:&nbsp;&nbsp;¥&nbsp;<span class="price">{{ totalPrice }}</span></span>
          <!-- 结算按钮 -->
          <button class="pay">结算( {{ fruitList.length }} )</button>
        </div>
      </div>
    </div>
    <!-- 空车 -->
    <div class="empty" v-else>🛒空空如也</div>
  </div>
</template>
<style scoped>
@import './style/index.css';
@import './style/inputnumber.css'
</style>

